// 合成事件

import React from "react";

/*
* 基于 React 内部的处理，如果我们给合成事件绑定一个普通函数，当事件行为触发，绑定的函数执行，方法中的this会是 undefined
* 解决方案：bind 修改 this指向 ； 箭头函数
*
* 合成事件对象：react内部结果特殊处理，把各浏览器的事件对象统一，最后一个实参就是合成对象
*       + nativeEvent：内置属性对象：基于这个属性，可以获取浏览器内置的原生的事件对象
*       +
*  bind 在React事件绑定中运用
*       + 绑定的方法是一个普通函数，需要改变函数的this实例，此时需要用到 bind
*       + 想给函数传递指定的实参，可以基于bind预先处理(bind会把合成事件对象以最后一个实参传递给函数)
* */

class Demo extends React.Component {

    handler1(x, y, ev) { // Demo.prototype
        console.log(this)
        console.log(ev)
    }

    handler2 = (x, y, z, ev) => { //
        console.log(this)
        console.log(ev) // SyntheticBaseEvent 合成事件对象 (react内部结果特殊处理，把各浏览器的事件对象统一)
    }

    render() {
        return <div>
            <button onClick={this.handler1.bind(this, 1, 2)}>按钮1</button>
            <button onClick={this.handler2.bind(null, 1, 2, 3)}>按钮2</button>
        </div>
    }
}

export default Demo